FuelWise: A MERN-Stack Web Application for Fuel Consumption and Expense Tracking

Abstract

Vehicle owners often keep refuelling details in notebooks, receipts or scattered spreadsheets, which makes fuel use and spending hard to review. This paper presents FuelWise, a web application that records refuelling events and summarises them on a single dashboard. FuelWise follows a three-tier architecture: a React 19 single-page front end, a Node.js/Express 5 REST API and a MongoDB database accessed through Mongoose. A user can add, edit, delete and search records of vehicle name, odometer reading, fuel quantity, fuel cost and date, and the interface computes total fuel, total expense, record count and monthly expense for the six most recent months. The paper describes the design, data model, implementation and a test plan. Manual checks with sample data confirmed the totals and search behaviour. The mileage and distance columns, however, read fields that the evaluated back end neither stores nor calculates, and the system lacks authentication and server-side validation; these limitations and the planned enhancements are discussed. FuelWise is an academic prototype, not a production system.

Introduction

FuelWise is a web-based application designed to help vehicle owners manage fuel consumption and expenses by maintaining organized records of refuelling activities. Traditional methods, such as notebooks, receipts, and spreadsheets, can lead to missing information, recording errors, and difficulties in calculating expenses. FuelWise addresses these challenges by providing a centralized platform for recording, managing, searching, and analysing fuel data.

The application allows users to enter five essential details: vehicle name, odometer reading, fuel quantity, fuel cost, and refuelling date. Users can add, edit, delete, and search records by vehicle name. The dashboard displays key statistics, including total fuel consumed, total expenses, average mileage, and the number of refuelling records. It also includes a monthly expense chart showing spending trends over the six most recent months.

FuelWise follows a three-tier web architecture using React 19 for the frontend, Express 5 and Node.js for the backend, and MongoDB with Mongoose for data storage. Axios connects the frontend to the backend through a REST API that supports four operations: retrieving, creating, updating, and deleting fuel records. Input validation and error messages help improve usability and prevent invalid entries from being submitted through the interface.

The system aims to simplify fuel expense tracking, reduce manual calculations, and help users understand their refuelling history. However, the current prototype has limitations, including the absence of user authentication, multi-user data separation, receipt uploads, data export, and server-side mileage calculation. Some mileage-related fields also require correction or verification to ensure that the dashboard displays accurate results. Additional security measures, database validation, backups, and improved modularity would be necessary before production deployment.

Conclusion

FuelWise demonstrates a lightweight, three-tier approach to recording vehicle refuelling data, storing it in MongoDB and presenting totals and monthly expense on a dashboard. The prototype supports a complete create, read, update, delete and search workflow, and the sample-data checks agree with manual calculations. It should be treated as an academic prototype: the mileage analysis suggested by its interface is not yet produced by the back end, and security and validation must be strengthened before it is used with real personal data.

References

[1] U.S. Department of Energy, “Fuel economy.” [Online]. Available: https://www.fueleconomy.gov/ [2] I. Sommerville, Software Engineering, 10th ed. Harlow, U.K.: Pearson, 2015. [3] Meta Open Source, “React documentation.” [Online]. Available: https://react.dev/ [4] OpenJS Foundation, “Express 5.x API reference.” [Online]. Available: https://expressjs.com/ [5] MongoDB, Inc., “MongoDB manual.” [Online]. Available: https://www.mongodb.com/docs/manual/ [6] R. T. Fielding, “Architectural styles and the design of network-based software architectures,” Ph.D. dissertation, Univ. of California, Irvine, CA, USA, 2000. [7] Mongoose Contributors, “Mongoose documentation.” [Online]. Available: https://mongoosejs.com/docs/ [8] MDN Web Docs, “Intl.NumberFormat,” Mozilla. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat [9] Create React App Contributors, “Create React App documentation.” [Online]. Available: https://create-react-app.dev/ [10] Axios Contributors, “Axios documentation.” [Online]. Available: https://axios-http.com/

Copyright

Copyright © 2026 Bharath Kumar N, Gokul R, Godlin Mejo K, Xavier Mary A. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.